{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}计算机编程 - 原生态{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords" content="JavaScript,前端,Node.js,Ajax,Python,爬虫,scrapy"/>
    <meta name="description" content="做专业小白入门IT互联网职业社区。"/>
    <link rel="stylesheet" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="{% static 'js/layer/layer.js' %}"></script>
    {% block header_css %}{% endblock %}
    {% block header_js %}{% endblock %}
</head>
<body>
{% block header %}
    <!-- 头部导航start -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="{% url 'index' %}">主页</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav" id="nav-bar">
                        <li class="active"><a href="#">前端<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">后端</a></li>
                    </ul>
                    {% if request.user.is_authenticated %}
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true"
                                   aria-expanded="false">
                                    {{ request.user }}
                                    <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="{% url 'article:my-blogs' %}">我的博客</a></li>
{#                                    <li><a href="{% url 'message:message' %}">消息中心</a></li>#}
{#                                    <li><a href="{% url 'users:user-info' %}">个人信息</a></li>#}
{#                                    <li><a href="{% url 'users:modify-password' %}">修改密码</a></li>#}
                                    <li role="separator" class="divider"></li>
                                    <li><a href="{% url 'users:logout' %}">退出登录</a></li>
                                </ul>
                            </li>
                        </ul>
{#                        <div class="navbar-form navbar-right">#}
{#                            <a href="#" class="glyphicon glyphicon-bell new-message" aria-hidden="true">#}
{#                                <span class="badge">56</span>#}
{#                            </a>#}
{#                        </div>#}
                    {% else %}
                        <div class="navbar-form navbar-right">
                            <a class="btn btn-default" href="{% url 'users:login' %}">请登录</a>
                        </div>
                    {% endif %}
                    <div class="navbar-form navbar-right">
                        <a class="btn btn-primary" href="{% url 'article:new-article' %}">写文章</a>
                    </div>
                    <div class="navbar-form navbar-right">
                        <div class="input-group">
                            <input type="text" class="form-control" id="key-word" placeholder="请输入搜索关键词">
                            <span class="input-group-addon nav-search" aria-hidden="true" id="search-btn">搜索</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <!-- 头部导航end -->
{% endblock %}

{% block container %}

{% endblock %}

{% block footer %}

{% endblock %}
</body>
<script>
    $(function () {
        // 获取导航菜单
        $.ajax({
            url: '/article/nav/',
            methods: 'get',
            success: function (data) {
                if (data.code == 0) {
                    var html = '';
                    var baseUrl = window.location.hostname;
                    for (var i = 0; i < data.category_list.length; i++) {
                        html += '<li><a href="/?category=' + data.category_list[i].key + '">' + data.category_list[i].value + '</a></li>';
                    }
                    $('#nav-bar').html(html)
                }
            }
        })
        // 监听输入框回车事件
        $('#key-word').keyup(function(event){
            if (event.keyCode == 13) {
                $("#search-btn").trigger("click");
            }
        });
        // 全文搜索
        $('#search-btn').on('click', function () {
            var keyWord = $('#key-word').val();
            if (keyWord) {
                window.location.href = window.location.origin + '?key_word=' + keyWord;
            }
        })
    })
</script>
<script>
    {#  百度统计  #}
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?0154ede7b05a5c681ecdf6b8a4ebeed7";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</html>
